<template>
  <page class="home-page">
    <zui-header>
      <!-- <logo type="xiaoyanyun" href="/"></logo> -->
      <h4 class="zui-logo-text">
        &nbsp;&nbsp;智能系统、快捷安全
        <br />&nbsp;&nbsp;区块链慈善平台
      </h4>
      <!-- <div class="zui-rightcol"  style="color: #0b8ba5;">◄目录►11111111</div> -->
      <drop-list :config="configData" ref="droplist"></drop-list>

      <zui-button @click="gologin()">登录平台</zui-button>
          <zui-button  @click="zc()">注册用户</zui-button>

      <zui-button @click="gocbax()">传播爱心</zui-button>
         <zui-button @click="goxxgk()">信息公开</zui-button>

           <zui-button @click="gocsxm()">慈善项目</zui-button>

      <zui-button @click="gohome()">首页</zui-button>
    </zui-header>
    <!-- <lunbotu></lunbotu> -->
    <el-dialog
 
  :visible.sync="dialogVisible"
  width="21%"
  class="login-wrap"
  >
  
    <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" >
      <h3 class="title">用户登录</h3>
      <el-form-item prop="userName">
        <el-input type="text" v-model="ruleForm.userName" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      
      <el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox>
      <el-form-item class="buttom_one" >
        <el-button class="button1" type="primary"    @click="login()" :loading="logining">用户登录</el-button>
        <el-button  class="button2" type="primary"  @click="dl()" :loading="logining1">审核者登录</el-button>
         <!-- <el-button  class="button3" type="primary" style="width:100%;" @click="gohome()" :loading="logining">首页</el-button> -->
      </el-form-item>
    </el-form>
 
  
</el-dialog>
<img src="http://www.cpf.net.cn/themes/cpf/skin/images/banner.jpg" class="img4" >


  <br> <br>
     <div class="good1">
       <h1>项目筹款人名单</h1>
      <br><br><br>
       <div class="good2">
         <div>
         秉承“经营信任”的发展理念，不夸大求助信息、隐瞒个人财产信息、制造假病历、不当挪用医疗款等行为，对于进入失信筹款人黑名单的用户，将不再为其提供服务，并视情上报相关政府部门以及征信机构。
</div>
       
       <br>
    
    
       <div >呼吁广大爱心人士、媒体记者、行业专家、医护人员、热心网友等各方面社会力量持续关注并支持个人大病求助互联网平台工作，积极监督和举报不诚信行为，捍卫广大爱心人士的善行善举，让真正陷入困境的大病患者能够看到希望，得到及时救助。

       </div>
    </div> <br>
  <el-form  :inline="true"  class="user-search">
      <el-form-item label="">
        <el-input size="small" v-model="searchname" placeholder="输入项目名称"></el-input>
      </el-form-item>
   
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
     
      </el-form-item>
    </el-form>
     </div>
       <div class="bg1">
    
     <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="日期"
      prop="beginDate"
      v-model="tableData.beginDate"
      >
      
    </el-table-column>
        <el-table-column
      label="受助人ID"
      prop="recipientId"
       v-model="tableData.recipientId">
    </el-table-column>
        <el-table-column
      label="项目名称"
      prop="entryName"
       v-model="tableData.entryName">
    </el-table-column>
    <el-table-column
      label="已储金额"
      prop="collectAmount"
       v-model="tableData.collectAmount">
    </el-table-column>
        <el-table-column
      label="目标金额"
      prop="targetAmount"
       v-model="tableData.targetAmount">
    </el-table-column>
     <el-table-column
      label="类型"
      prop="type"
       v-model="tableData.type">
    </el-table-column>
   
  </el-table></div>
 
   
    <zui-footer />
  </page>
</template>
<script>
import "./less/home-page.less";
import lunbotu from "../components/components/lunbotu";

 import axios from 'axios'

import Logo from "../components/components/Logo";
import Page from "../components/components/Page";
import ZuiHeader from "../components/components/Header";
import ZuiFooter from "../components/components/Footer";
import ZuiButton from "../components/components/Button";
import feature1 from "../assets/img/feature1.png";
import feature2 from "../assets/img/feature2.png";
import feature3 from "../assets/img/feature3.png";
import feature4 from "../assets/img/feature4.png";
import Util from "../Util";

import DropList from "vue-droplist";
export default {
  components: {
  
    lunbotu,
    Page,
    Logo,
    ZuiHeader,
    ZuiFooter,
    ZuiButton,
    DropList,
  },
  data() {
    return {
      searchname:"",
      tableData:{},
       logining: false,
      // 记住密码
      rememberpwd: false,
       dialogVisible: false,
      logining1: false,
      ruleForm: {
        //username和password默认为空
        userName: '',
        password: '',
        code: '',
        randomStr: '',
        codeimg: ''
      },
      //rules前端验证
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      feature1: feature1,
      feature2: feature2,
      feature3: feature3,
      feature4: feature4,
      carouselPerPage: Util.os.android || Util.os.iPhone ? 1 : 2,

      configData: {
        position: {
          // 设置显示位置，position
          top: "60px",
          right: "15px",
          bottom: "",
          left: "",
        },
        width: "40%", // 设置宽度
      },
    };
  },
    created() {
    this.getdata()
  },
  methods: { 
       getdata(){
         axios.get("http://47.106.193.50:8080/entryByFbu").then(res=>{
            let code = res.data.code
            if (code == "200") {
               this.tableData = res.data.data
            }
         })

       },search() {
        let arr= []
        let list =  this.tableData
       console.log(list,'323232');
       if (this.searchname == "") {
           this.getdata()
       }else{
        // console.log(this.searchname);
        for (let i = 0; i < list.length; i++) {
         if (list[i].entryName.indexOf(this.searchname) >= 0) {
         arr.push(list[i])
      }}
        //  console.log(arr,'react');
         this.tableData = arr
       }},
    getuserpwd() {
      if (getCookie('user') != '' && getCookie('pwd') != '') {
        this.ruleForm.userName = getCookie('user')
        this.ruleForm.password = getCookie('pwd')
        this.rememberpwd = true
      }
    },

 dl(){
       axios.post("http://47.106.193.50:8080/adminLogin",this.ruleForm).then(res=>{
          let code = res.data.code
          console.log(code);
          if (code == "200") {
          
              setTimeout(() => {
                this.logining = false
                this.$store.commit('login', 'true')
                // 缓存token
                // localStorage.setItem('user', JSON.stringify(res.data.data))
                // localStorage.setItem('data', res.data.data)
                // 缓存用户个人信息
                this.$store.commit("savauser", JSON.stringify(res.data.data));
                // localStorage.setItem("userdata", JSON.stringify(this.pickerItem));
                // computed 中调用
                // this.$store.state.xxx  调用
                 localStorage.setItem('user', JSON.stringify(res.data.data))
                localStorage.setItem('role', res.data.data.role)
                    let name = localStorage.getItem("user")
                    localStorage.setItem('id', res.data.data.id)
                  console.log(name,"登录信息"); 
                 this.$router.push({
                   path: '/pay/szdxx',
                
                     }) 
                       this.$message({
              message: '成功',
              type: 'success'
            })
     
              }, 1000)
            } else {
              this.$message.error("用户名或者密码错误");
              this.logining = false
       
            }
        
          }
       )

    },


    login(){
       axios.post("http://47.106.193.50:8080/userLogin",this.ruleForm).then(res=>{
          let code = res.data.code
          if (code == "200") {
              setTimeout(() => {
                this.logining = false
            this.$store.commit('login', 'true')

                // 缓存token
                localStorage.setItem('user', JSON.stringify(res.data.data))
                localStorage.setItem('role', res.data.data.role)
                localStorage.setItem('userName', res.data.data.userName)
                localStorage.setItem('phone', res.data.data.phone)
                localStorage.setItem('email', res.data.data.email)
                localStorage.setItem('realName', res.data.data.realName)
                localStorage.setItem('sex', res.data.data.sex)
                localStorage.setItem('createDate', res.data.data.createDate)
                localStorage.setItem('id', res.data.data.id)
                localStorage.setItem('password', res.data.data.password)
               
         
                // 缓存用户个人信息
            this.$store.commit("savauser", res.data.data);
            // localStorage.setItem("userdata", JSON.stringify(this.pickerItem));
            // computed 中调用
            // this.$store.state.xxx  调用
                 let name = localStorage.getItem("role")
                 let xx = localStorage.getItem("user")

        console.log(name,"登录信息");
        if(name == "捐助者"){
             this.$router.push({
                   path: '/pay/szdxx',
                   
                 })
      }else if(name == "受助者"){
         this.$router.push({
                   path: '/pay/szdxx',
                   
                 }) }

        else{
            this.$router.push('/')
        }
              }, 1000)
            } else {
              this.$message.error("用户名或者密码错误");
              this.logining = false
       
            }
        
          }
       )

    },
    zc(){
      this.$router.push({ path: "/register" });

    },
    gohome() {
      this.$router.push({ path: "/" });
    },  goxxgk(){
      this.$router.push({ path: "/xxgk" });

     }
     ,
    gocbax(){
 this.$router.push({path:'/cbax'});
    }
    ,gologin(){
      this.dialogVisible = true
      
    },
    gocsxm(){
 this.$router.push({path:'/csxm'});
    }
  },
};
</script>
<style scoped>
.bg1{
    width: 90%;
    display: flex;
    margin-left: 5%;
    justify-content: center;
}
.user-search{
  display: flex;
  align-content: center;
  justify-content: center;
}
.buttom_one{
  display: flex;
  justify-content: center;
  align-content: center;
}
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.remember {
  margin: 0px 0px 5px 10px;
}
.button2{
  margin-top:10px;
 /* margin-left: 1vw; */
}
.button3{
  /* margin-top:10px; */
 
}
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 2%;
  background-image: url();
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}
.login-container {
  margin-top: -15vh;
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
/* box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) */

.img4{
  width: 100%;
  /* margin-left: 10%; */
  height: 450px;
}
.good2{
  width: 90%;
  font-size: 15px;
  /* flex-direction:row; */
}
.xw3{
  margin-top: 3px;
}
 .text {
    font-size: 14px;
  }

  
 
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 250px;
    margin-left: 1%;
  }
.good1{
  flex-direction:column ;
    display: flex;
  justify-content: center;
align-items:center
}
.xw{
   width: 100%;
  height: 260px;
  padding: 30px 0;
  /* background: url(img/donbg.jpg); */
  min-width: 1200px;
  margin-bottom: 10px;
  background-size: 100% 260px;
  display: flex;
  justify-content: center;
align-items:center
}
.wz{
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    margin-top: 10px;
}
.zj2{
  margin-left: 5vw;
}
.zj {
  width: 100%;
  height: 260px;
  padding: 30px 0;
  background: url(img/donbg.jpg);
  min-width: 1200px;
  margin-bottom: 10px;
  background-size: 100% 260px;
  display: flex;
  justify-content: center;
align-items:center

}
.main-content {
  width: 1200px;
  margin: 0 auto;
}

.image {
  width: 290px;
  height: 140px;
}
.info-box li {
  margin-right: 60px;
}
.zt {
  display: flex;
  justify-content: center;

  align-items: center;
}

.clearfix:after {
  clear: both;
}
.img1 {
  width: 180px;
  height: 100px;
}
</style>